<template>
    <div>
     <el-breadcrumb separator-class="el-icon-arrow-right"> 
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form :inline="true">
          <el-form-item>
          <el-button type="primary">添加用户</el-button>
        </el-form-item>
        <el-form-item>
          <el-input style="width:300px;" v-model="page.query"  placeholder="请输入内容">
            <el-button slot="append" @click="userlist"  icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <el-table
    :data="user"
    style="width: 100%">
    <el-table-column
      type='index'
      label="#"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="150">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="role_name"
      label="角色"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date"
      label="状态"
      width="150">
      <template slot-scope='scope'>
        <el-switch 
  v-model="scope.row.mg_state" @change='status(scope.row.id,scope.row,mg_state)'
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
   <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="pagesize"
      @current-change="pagenum"
      :current-page="page.pagenum"
      :page-sizes="[1, 3, 6, 9,12]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  </div>
</el-card>
    </div>
</template>

<script>
import { userlist } from "../api/api.js";
export default {
  data() {
    return {
      user: [],
      page: {
        pagenum: 1,
        pagesize: 4,
        query: ""
      },
      count:0,
    };
  },

  mounted() {
    this.userlist();
  },
  methods: {
    async userlist() {
      let res = await userlist(this.page);
      this.user = res.data.users;
      this.count = res.data.total
      console.log(res);
    },
    del(id) {
      this.$confirm("确认删除这个用户吗?").then(async () => {
        let res = await delUser(id);
        console.log(res);
        if (res.meta.status == 200) {
          this.$message.success(res.meta.msg);
          this.userlist();
        }
      });
    },
    pagesize(pagesize) {
      this.page.pagesize = pagesize;
      this.userlist();
    },
    // 改变页码
    pagenum(pagenum) {
      this.page.pagenum = pagenum;
      this.userlist();
    },
  }
};
</script>

<style lang='scss' scoped >
</style>
